import { useRouter } from 'next/router';
import { blogInfos } from '../_component/blogs';
import styles from './index.module.scss';

const BlogPage = function () {
  const router = useRouter();

  const blogName = router.query.blogid;

  const blog = blogInfos.find((blog) => blog.path.split('/').pop() === blogName);

  if (!blog) {
    return <div>loading...</div>;
  }
  const { component: BlogComponent } = blog;

  return (
    <div className={styles.blog}>
      <BlogComponent />
    </div>
  );
};
export default BlogPage;
